<template>
  <div class="home">
    <Header />
    <!-- 轮播图开始 -->
    <div class="banner">
      <el-carousel height="480px" :interval="5000" arrow="always">
        <el-carousel-item v-for="item in bImg" :key="item">
          <img  :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
      <div class="banner-item">
        <div class="data_1">
        <p class="title">鲜花用途</p>
        <ul class="details">
          <li>爱情鲜花</li>
          <li>生日鲜花</li>
          <li>友情鲜花</li>
          <li>问候长辈</li>
          <li>探病慰问</li>
          <li>道歉鲜花</li>
          <li>祝贺鲜花</li>
          <li>婚庆鲜花</li>
          <li>商务鲜花</li>
        </ul>
        </div>
      </div>
    </div>
    <!-- 轮播图结束 -->
    <!-- 商品列表开始 -->
    <div class="product" v-for="item of proList" :key="item.id">
      <div class="title">
        <div class="left">
          <span >{{item.title}}</span>
          <span>{{item.title_2}}</span>
        </div>
        <a href="#" class="iconfont jiantou">更多{{item.title}}</a>
      </div>
      <div class="proList">
        <img  :src="item.b_img" alt="">
        <div>
         <div @click="goDetail(p.id)" v-for="p of item.list" :key="p.id">
           <div class="img">
             <img :src="p.img" alt="">
           </div>
           <p>{{p.title}}</p>
           <p>￥{{p.price}}</p>
           <p >已售{{p.count}}件</p>
         </div>
        </div>
      </div>
    </div>
    <!-- 商品列表结束 -->
  </div>
</template>

<script>
import Header from "../components/header.vue";
export default {
  data() {
    return {
      bImg: [],
      proList:[]
    };
  },
  components: { Header },
  mounted() {
    this.getBanner();
    this.getList()
  },
  methods: {
    // 获取轮播图数据
    getBanner() {
      this.axios.get("/banner").then((res) => {
        console.log(res);
        this.bImg = res.data.data;
      });
    },
    // 获取商品列表数据
    getList(){
     this.axios.get('/product').then(res => {
       console.log(res)
       this.proList = res.data.list
     })  
    },
    // 跳转详情
    goDetail(val){
     this.$router.push(`/detail/${val}`)
    }
  },
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/indexs.scss'
</style>
